<template>
  <f7-page class="wrapper">
    <qm-currentcy-navbar title="项目列表">
    </qm-currentcy-navbar>
    <div class="tabs-wrapper">
      <van-tabs
        color="#3385FF"
        title-active-color="#3385FF"
        title-inactive-color="#61677A"
        line-width="15px"
        line-height="3px"
      >
        <van-tab title="项目统计"></van-tab>
        <van-tab title="项目列表"></van-tab>
      </van-tabs>
    </div>
    <qm-classified-retrieval :options="options"></qm-classified-retrieval>
    <f7-block class="project-list">
      <qm-project-card v-for="i in 4" :key="i" :state="i - 1"></qm-project-card>
    </f7-block>
    <qm-fixed-nail top="80%" left="80%"></qm-fixed-nail>
  </f7-page>
</template>

<script>
import { Tab, Tabs } from "vant"

export default {
  name: "project-list",
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab
  },
  data() {
    return {
      options: [
        { text: "全部", value: 0 },
        { text: "全部", value: 1 },
        { text: "全部", value: 2 }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  min-height: 100vh;
  background-color: #F7F9FC;
}
.tabs-wrapper {
  padding-bottom: 2px;
  border-bottom: 1px solid #F7F9FC;
}
.project-list {
  margin: calc(30px * var(--ratio)) calc(32px * var(--ratio));
  padding: 0;
}
::v-deep .page-content {
  padding-top: calc(88px * var(--ratio))
}
</style>